1 00:00:00,720 --> 00:00:02,150 Hello and welcome him. 2 00:00:02,230 --> 00:00:10,110 This show we are going to create the structure for our app using hastier mail. 3 00:00:12,090 --> 00:00:12,590 All right. 4 00:00:12,600 --> 00:00:14,940 I got my text said it opens. 5 00:00:14,950 --> 00:00:18,010 I'm just going to switch to my blank lithium LFR. 6 00:00:18,190 --> 00:00:21,740 It does see it there called in Deathstar hastier mill. 7 00:00:21,900 --> 00:00:28,620 So the way this election is going to work I'm going to pre write the code and then I had it on and explain 8 00:00:28,620 --> 00:00:29,980 what I have done. 9 00:00:32,160 --> 00:00:35,620 I have just added some hastier more tags. 10 00:00:35,760 --> 00:00:44,070 The very first line here the doc type is not actually part of this email document is called E Doc typed. 11 00:00:44,100 --> 00:00:45,960 It said declaration. 12 00:00:45,960 --> 00:00:54,760 The purpose of the doctype is to notify the web browsers or set changes that the document contains. 13 00:00:54,750 --> 00:00:58,480 Hastier Mail 5 so this is main purpose. 14 00:00:58,590 --> 00:01:07,170 The actual hastier mill documents starts from line 2 which is the opening tag and line 5 which is the 15 00:01:07,170 --> 00:01:15,090 closing tags for every other content between these hastier mills or plain unclose in tag all comprise 16 00:01:15,180 --> 00:01:21,610 of the content of the speech so we can all sob nest. 17 00:01:21,640 --> 00:01:24,470 Other tags inside this. 18 00:01:24,660 --> 00:01:25,160 A limit. 19 00:01:25,170 --> 00:01:31,650 This hit home elements for gun nest child elements. 20 00:01:31,650 --> 00:01:36,660 I have had shared a child element which is the head tag here. 21 00:01:36,960 --> 00:01:39,380 Line 3 2 8. 22 00:01:39,610 --> 00:01:46,390 So also notice I've indented properly so you can tell by looking at the code that the head element. 23 00:01:46,410 --> 00:01:54,010 Here is a child of the hastier male and these tags here are children of the head tag. 24 00:01:54,180 --> 00:01:58,830 So the head tag is merely for information purposes. 25 00:01:58,830 --> 00:02:02,750 You don't actually see the content of the head tags. 26 00:02:02,960 --> 00:02:10,390 They are there to provide information for these web browsers and for search engine purposes. 27 00:02:10,440 --> 00:02:17,180 So we've got a title tag online for which basically display of the title of the page. 28 00:02:17,430 --> 00:02:22,140 Then line 5 we've got email tar tag. 29 00:02:22,260 --> 00:02:31,840 Inside of it it's got an attribute called Cast set with the value of utf that 8 so metal cast the car's 30 00:02:31,840 --> 00:02:32,150 head. 31 00:02:32,160 --> 00:02:41,220 It refers to the encoding type for this document the standard is utf 8 line number 6 of the code. 32 00:02:41,230 --> 00:02:52,170 Gone are the Met a tag with a attribute of name and a value of viewport or saw another attribute called 33 00:02:52,170 --> 00:03:00,980 content with a value of equal device minus a comma initial dash skill equals 1. 34 00:03:01,230 --> 00:03:04,590 What line is 7 the same is that. 35 00:03:04,620 --> 00:03:13,350 So what line 6 is saying is that this document can be viewed by any device regardless of the screen 36 00:03:13,350 --> 00:03:14,050 size. 37 00:03:14,340 --> 00:03:19,810 So you can have a small device like a cell phone or a big device like a big computer screen. 38 00:03:20,220 --> 00:03:26,690 And also I've said initial skill to dash one that means of course one you can zoom. 39 00:03:26,700 --> 00:03:35,280 The skill here now was you to zoom in and out line 7 is a reference to our external style sheet which 40 00:03:35,280 --> 00:03:36,120 is here. 41 00:03:36,120 --> 00:03:37,480 This town is here. 42 00:03:37,830 --> 00:03:49,290 Thus a reference to the style -- I have added another child element which is the body score the content 43 00:03:49,320 --> 00:03:50,680 of the body tag. 44 00:03:50,690 --> 00:03:55,690 The body is down from line 10 and ends on line 26. 45 00:03:55,770 --> 00:04:02,450 So this is the actual content that will be visible when they visit or close to this page. 46 00:04:02,700 --> 00:04:10,560 Okay so only the content between the body tag is displayed live by the tag on line 11 there. 47 00:04:10,560 --> 00:04:20,260 I have quite a head into now which is a hape one animal saw used some in line styling saw right down. 48 00:04:20,280 --> 00:04:26,970 I am going to do some external time later but I've also embedded some in life lifestyle in here saw 49 00:04:27,000 --> 00:04:34,890 line 11 gwadar HEY one tag which is ahead in intact and I've applied this path Toit given the colour 50 00:04:34,980 --> 00:04:35,670 black. 51 00:04:35,680 --> 00:04:43,360 Given the margin to the left of 395 pixels and the font which refers to the baldness. 52 00:04:43,510 --> 00:04:51,500 So I'm giving it the value of bold and then the actual title detects they'll be displayed is image slide 53 00:04:51,500 --> 00:04:59,310 that have inserted a couple of brake tags to create some space on line 12 13. 54 00:04:59,620 --> 00:05:07,970 Lime 4 team 2 lane 21 is where we create a diff. 55 00:05:08,190 --> 00:05:15,360 We could mmd one home for teemed quad wrap up and give me hope this will be the main day that will wrap 56 00:05:15,490 --> 00:05:25,740 me the images so giving it to a style maximum of a thousand pixels and positron to be relative. 57 00:05:26,140 --> 00:05:30,110 Okay and I've created a few image tags. 58 00:05:30,240 --> 00:05:37,350 I mge tags and giving them a class off slice or they are or belong to the same class. 59 00:05:37,400 --> 00:05:43,040 So when I'm doing this he says later these stylin will be applied to this in his class. 60 00:05:43,370 --> 00:05:47,750 So we're the image class slides of all saw with it. 61 00:05:47,750 --> 00:05:50,840 I am genito specified the look ition of the image. 62 00:05:51,100 --> 00:05:54,670 So look I shall not be made to do that year in an attribute. 63 00:05:54,890 --> 00:06:00,530 So this source attribute here is used to specify where the images come in from. 64 00:06:00,860 --> 00:06:08,000 So the images come in from my images folder and thus the first image is second image third for dinosaur. 65 00:06:08,210 --> 00:06:16,560 I have applied styling to the images to the weed to be a hundred percent of the parent container but 66 00:06:16,570 --> 00:06:24,740 I will modify this slightly when we are doing our external stahl's -- on line 22 and 23. 67 00:06:24,740 --> 00:06:33,740 I've created the class quad button one and put in to give me an eighth position of absolute And so from 68 00:06:33,740 --> 00:06:38,410 the top 5 percent of the print container from the left. 69 00:06:38,440 --> 00:06:40,240 Set it to series. 70 00:06:40,300 --> 00:06:48,330 I've also trashed the event on Click event to event handler and what those will do. 71 00:06:48,400 --> 00:06:53,860 I will look at times a function of great end of function on the wall should display this. 72 00:06:53,900 --> 00:06:56,710 Show you how this was done in the javascript. 73 00:06:56,840 --> 00:07:00,530 Later saw this what the from chool would do. 74 00:07:00,530 --> 00:07:05,810 It check put in number else lied and respond accordingly. 75 00:07:05,940 --> 00:07:10,060 Here in those botin he have greater this plan. 76 00:07:10,100 --> 00:07:14,630 The reason I've put this pattern here is so that I can start this. 77 00:07:14,750 --> 00:07:23,600 This entity this entity is used to create a less down and this is used to create equal. 78 00:07:23,600 --> 00:07:24,570 Great idea. 79 00:07:24,800 --> 00:07:34,460 Okay so the amp assign g t will create a greater downside beath up assign else you will create here 80 00:07:34,450 --> 00:07:35,580 less than sign. 81 00:07:35,930 --> 00:07:43,060 So we gonna use the great UNled does sign to switch between next and previous on the slide. 82 00:07:43,060 --> 00:07:49,400 Boy I need to wrap them inside this band eidy so that I can start them property because you can start 83 00:07:49,400 --> 00:07:51,250 them alone it's a bit difficult. 84 00:07:51,530 --> 00:08:00,110 That's why I've wrapped them around a span eliminate the deep end here on line 24 line 25. 85 00:08:00,110 --> 00:08:01,350 It's a reference tool. 86 00:08:01,370 --> 00:08:08,810 Our script this script is javascript is always Bliz just before the close embody attack so that it doesn't 87 00:08:08,920 --> 00:08:15,240 even wait for all the elements on the page to look before descript executes. 88 00:08:15,260 --> 00:08:20,480 So let's see for our hastier mail for this project. 89 00:08:20,480 --> 00:08:23,610 Thanks for watching and bye for now. 90 00:08:23,720 --> 00:08:25,300 I'll just say that. 91 00:08:27,330 --> 00:08:30,650 We came out with a quick look and see what it looks like. 92 00:08:31,380 --> 00:08:33,500 So this is why they paid those like out of my mind. 93 00:08:33,510 --> 00:08:40,170 Obviously the functionality is not in place so we can slide through the images at the moment but at 94 00:08:40,170 --> 00:08:44,110 least we've got this Trock shot in place.